/*
  学习目标：函数式组件-性能优化的三个常用方式
  1. React.memo
  语法：const 新的组件名 = React.memo(组件名)
  作用：避免组件的无效更新 类似 PureComponent
  
  2. useMemo
  作用：自带缓存效果，避免重复计算，类似vue中的计算属性，
  语法：const 计算属性 = useMemo(() => 计算的值， [依赖项])
  
  3. useCallback
  作用：避免函数被重复定义
  语法：useCallback(回调函数, [])
  // 💥 避免回调函数内直接访问state，会产生闭包效果，永远只能获取初始值
  // 💥 依赖项为空[]
*/

import { Button } from 'antd-mobile';
import React, { useCallback, useEffect, useMemo } from 'react';
import { useState } from 'react';

export default function Test() {
  const [count, setCount] = useState(0);

  // ✅
  const handleAdd = useCallback((c: number) => {
    setCount(c + 1);
  }, []);

  return (
    <div>
      <Count count={count} onAdd={handleAdd} />
    </div>
  );
}
function Count({ count, onAdd }: any) {
  useEffect(() => {
    console.log(' onAdd更新了 ----->  ');
    // 💥 依赖项可以放任意数据类型
    // 💥
  }, [onAdd]);

  return (
    <div>
      <Button onClick={() => onAdd(count)}>点我修改Count</Button>
      <h1>{count}</h1>
    </div>
  );
}
